<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8" />
		<title>用户注册</title>
		<link rel="stylesheet" th:href="@{/static/before/css/login.css}" />
		<script src="../../static/before/js/jquery-3.4.1.min.js"></script>
		<link rel="stylesheet" href="../../static/before/css/button.css">


	</head>
	<body>
		<form th:action="@{register}" method="post" id="register_form">
		<div class="regist">
			<div class="regist_center">
				<div class="regist_top">
					<div class="left fl">会员注册</div>
					<div class="right fr"><a href="index.html" target="_self">orangee</a></div>
					<div class="clear"></div>
					<div class="xian center"></div>
				</div>
				<div class="regist_main center">
					<div class="username">用&nbsp;&nbsp;户&nbsp;&nbsp;名:&nbsp;&nbsp;
						<input class="shurukuang" type="text"id="username" name="username" placeholder="请输入你的用户名"/>
						<span id="usernames"></span></div>
					<div class="username">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:&nbsp;&nbsp;
						<input class="shurukuang" id="pwd"type="password" name="password" placeholder="请输入你的密码"/>
						<span id="pwdVal"></span></div>
					<div class="username">确认密码:&nbsp;&nbsp;
						<input class="shurukuang" id="repwd" type="password" name="repassword" placeholder="请确认你的密码"/>
						<span id="repwdval"></span></div>
					<div class="username">手&nbsp;&nbsp;机&nbsp;&nbsp;号:&nbsp;&nbsp;
						<input class="shurukuang" id="phone"type="text" name="tel" placeholder="请填写正确的手机号"/>
						<span id="phoneVal"></span><span><!--<button id ="PhoneCode"  type="button"  class="orange"  >发送手机验证码</button>--></span>
					</div>
					<div class="username">
						<div class="left fl">验&nbsp;&nbsp;证&nbsp;&nbsp;码:&nbsp;&nbsp;
							<input id="codes" class="yanzhengma" type="text" name="codes" placeholder="请输入验证码"/><span><input type="button" value="获取验证码" name="yzm" class="yzm" disabled="disabled"></span ><span id="codeval"></span></div>
						<div class="right fl"></div>
						<div class="clear"></div>

					</div>
				</div>
				<div class="regist_submit">
					<input class="button"   type="button" name="button" value="立即注册" >
				</div>
				
			</div>
		</div>
		</form>
	</body>




	<script type="text/javascript">
        $(document).ready(function(){
			var flag1 =false;
            var flag2 =false;
            var flag3 =false;
            var flag4 =false;
            var flag5 =false;
            var codess;
            //获取密码焦点时
            $("#pwd").focus(function(){
                $("#pwdVal").empty()
            })
            //失去密码焦点
            $("#pwd").blur(function () {
                pwd()
            })
            //获取确认密码焦点
            $("#repwd").focus(function(){
                $("#repwdval").empty()
            })
            //失去确认密码焦点
            $("#repwd").blur(function () {
                repwds()
            })
            //获取手机焦点
            $("#phone").focus(function(){
                $("#phoneVal").empty()
            })
            // 失去手机焦点
            $("#phone").blur(function () {
                phone()
            })
            //获取用户名字
            $("#username").focus(function(){
                $("#usernames").empty()
            })
            //失去用户名字
            $("#username").blur(function () {
                usernames();
            })

            //获得验证码框焦点
            $("#codes").focus(function(){
                $("#codeval").empty()
            })
            //失去验证码框焦点
            $("#codes").blur(function () {
                codes();
            })

        //邮箱验证
      /*  function email() {
            //获取用户信息
            var email = $("#Email").val();
            //正则表达式
            var testEmail= /^[0-9|A-z|_]{1,17}[@][0-9|A-z]{1,3}.(com)$/;
            //邮箱验证
            if(email==""||email==null ){
                $("#emaiVal").html("邮箱不能为空").css("color","red ");
                return false
            }else if (testEmail.test(email)==false){
                $("#emaiVal").html("你输入的邮箱格式不正确").css("color","red ");
                return false
            }else {
                //异步查询 邮箱号唯一

                $.ajax({
                    "url":"${pageContext.request.contextPath }/regiesterSevelet",
                    "type":"get",
                    "data":"email="+email,
                    "dataType" : "json",
                    "success":function(data){

                        if(data.error=="true"){
                            $("#emaiVal").html("邮箱已被使用").css("color","red")
                            flag=false;
                            return  flag;

                        }else{
                            $("#emaiVal").html("你的邮箱帐号可以使用").css("color","green")
                            flag=true;
                            return  true
                        }

                    }
                });
                return  flag;
            }
        }*/


        //密码确认
        function pwd() {
            //获取用户输入密码
            var pwd = $("#pwd").val();
            if(pwd==null||pwd==""){
                $("#pwdVal").html("密码不能为空").css("color","red ");
                return false
            }else if(pwd.length<6&&pwd.length>15){
                $("#pwdVal").html("密码长度不能小于6或大于15").css("color","red ");
                return flag1 =false;
            }else{
                $("#pwdVal").html("密码格式正确").css("color","green ");
                return flag1 =true;
            }
        }
        //验证密码一致性
        function repwds() {
            //获取用户输入密码
            var repwd = $("#repwd").val();
            var pwd = $("#pwd").val();
            if(repwd==null||repwd==""){
                $("#repwdval").html("密码不能为空").css("color","red ");
                 return flag2 =false;
            }else if(repwd.length<6){
                $("#repwdval").html("密码长度不能小于6").css("color","red ");
                return flag2 =false;
            }else if(repwd!=pwd){
                $("#repwdval").html("两次输入的密码不相同").css("color","red ");
                return flag2 =false;
            }else{
                $("#repwdval").html("密码一致").css("color","green ");
                return flag2 =true;
            }
        }
        //验证手机方法
        function  phone() {
            var phone = $("#phone").val();
            var regex =/^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/;
            if (phone == null || phone == "") {
                $("#phoneVal").html("手机号不能为空").css("color", "red ");
                return flag3 =false;
            }else if (regex.test(phone)==false){
                $("#phoneVal").html("手机格式不正确").css("color", "red ");
                return flag3 =false;
            } else {
                //异步查询 手机号

                $.ajax({
                    "url":"/registeres",
                    "type":"get",
                    "data":"phone="+phone,
                    "dataType" : "json",
                    "success":function(data){
                        if(data.error===false){
                            $("#phoneVal").html("手机号可以使用").css("color","green")
                            return  flag3 =true;

                        }else{
                            $("#phoneVal").html("手机号已被注册").css("color","red")
                            return  flag3 =false;
                        }

                    }
                });
                return  flag3;
            }

        }
        //验证姓名格式
        function  usernames() {
            var username = $("#username").val();
            var patrn =/^[a-zA-Z0-9_-]{4,16}$/;
            if(username==null||username==""){
                $("#usernames").html("用户名不能为空").css("color","red ");
                return flag4 = false;
            }else if(patrn.test(username)==false && username.length>10){
                $("#usernames").html("不能包含特殊字符,且长度不大于10").css("color","red ");
                return flag4 = false
            }else{
                $("#usernames").html("用户名可以使用").css("color","green ");
                return flag4 = true
            }
        }




			//验证验证码
			function codes(){
            var codes =$("#codes").val();
                if(codes==null||codes==""){
                    $("#codeval").html("用户名不能为空").css("color","red ");
                    return flag3 = false;
                }else if (codes==codess){
                    return flag3 = true
				}
                    return flag3
               /* $.ajax({
                    "url":"/codes",
                    "type":"get",
                    "data":"codes="+codes,
                    "dataType" : "json",
                    "success":function(data){
                        if(data.error===true){
                            $("#phoneVal").html("验证码正确").css("color","green")
                            return  flag3 =true;

                        }else{
                            $("#phoneVal").html("验证码错误").css("color","red")
                            return  flag3 =false;
                        }

                    }
                });*/
			}


       /*  *************************************以下是手机验证码*********************************/
        $(document).ready(function(){
            var ordertime=60;//设置再次发送验证码等待时间
            var timeleft=ordertime;
            var btn=$(".yzm");
            var phone=$("#phone");
            var reg = /^1[0-9]{10}$/;  //电话号码的正则匹配式

            phone.keyup(function(){
                if (reg.test(phone.val())){
                    btn.removeAttr("disabled")  //当号码符合规则后发送验证码按钮可点击
                }
                else{
                    btn.attr("disabled",true)
                }
            });

            //计时函数
            function timeCount(){
                timeleft-=1;
                if (timeleft>0){
                    btn.val(timeleft+" 秒后重发");
                    setTimeout(timeCount,1000)
                }
                else {
                    btn.val("重新发送");
                    timeleft=ordertime;   //重置等待时间
                    btn.removeAttr("disabled");
                }
            }

            //事件处理函数
            btn.on("click",function(){
                $(this).attr("disabled",true); //防止多次点击

                $.ajax({
                    "url":"SMS",
                    "type":"POST",
                    "data":"phone="+phone.val(),
                    "dataType" : "json",
                    "success":function(data){
                        var codes = $("#codes").val();
                        if(data.error==0){
                            $("#phoneVal").html("发送验证码失败！！！").css("color","red")


                        }else{
                            $("#phoneVal").html("发送验证成功！！！").css("color","green")
								 codess=data.code;

                                return  codess ;
                            }
                    }
                });
                timeCount(this);
            })

        })
            /*  *************************************以上是手机验证码*********************************/
            //表单提交
            $(".button").click(function(){


                if(flag1==true&&flag2==true&&flag3==true ) {
                    alert(flag3)
                    $("#register_form").submit();

                }
            })
        })
	</script>
</html>